<!-- 扬尘检测/右侧顶部 -->
<template>
  <div class="RightTop" style="height: 35%">
    <JxcsTitle title="街乡吹哨案件统计" />
    <div class="echarts" id="echarts1" ref="echarts1" style="height: 70%"></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
import { getRunState } from '@/api/index'
import { JieXiangChuiShaoDB } from '@/api'
import JxcsTitle from '@/components/JxcsTitle'

export default {
  components: {
    JxcsTitle
  },
  props: {
    streetCase: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    streetCase(val) {
      this.rankingList(val)
    }
  },
  data() {
    return {
      data: [],
      num: []
    }
  },
  mounted() {
    this.rankingList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    initChat() {
      var myChart = echarts.init(this.$refs.echarts1)
      var option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(31, 73, 135, 0.5)', //设置背景图片 rgba格式
          borderWidth: '1', //边框宽度设置1
          textStyle: {
            color: '#fff' //设置文字颜色
          },
          axisPointer: {
            type: 'line', //line,shadow
            lineStyle: {
              type: 'solid', //打开就是实线类型
              color: 'rgba(13, 151, 235, 0.7)'
            }
          },
          formatter: (params) => {
            let str = ` ${params[0].name} <br/> 案件:${params[0].data}件`

            return str
          }
        },
        grid: {
          left: '0%',
          right: '7%',
          top: '3%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.data,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(60, 255, 255, 1)' //设置颜色
            },
            type: 'border',
            width: 1
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 50,
            interval: 0,
            textStyle: {
              color: '#9ED5FF',
              fontSize: 12
            }
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 5
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(13, 151, 235, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            data: this.num,
            type: 'bar',
            barMaxWidth: 15,
            barGap: '10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 渐变方向，从左上角到右下角（0,0 到 0,1）
                  [
                    { offset: 0, color: 'rgba(60, 255, 255, 1)' }, // 100% 处的颜色为 #3CFFFF
                    { offset: 1, color: 'rgba(245, 247, 250, 0)' } // 0% 处的颜色为 #F5F7FA
                  ]
                ),
                label: {
                  show: false
                },
                barBorderRadius: [0, 0, 0, 0] //圆角大小
              }
            }
          }
        ]
      }
      var startNumber = 0
      // 有多少条数据
      var xAxisDatalen = this.data.length
      if (xAxisDatalen > 6) {
        // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
        var len = 5 //街乡数量12，显示一屏
        this.timer && clearInterval(this.timer)
        this.timer = setInterval(function () {
          if (startNumber === xAxisDatalen - len) {
            startNumber = 0
          }
          myChart.dispatchAction({
            type: 'dataZoom',
            startValue: startNumber,
            endValue: startNumber + len
          })
          startNumber++
        }, 2000)
      }
      myChart.setOption(option)
    },
    // 排名统计数据
    rankingList(val) {
      this.data = []
      this.num = []
      val.forEach((item) => {
        this.data.push(item.type)
        this.num.push(item.num)
      })
      this.initChat()
    },

    desHander() {
      let myChart = echarts.init(this.$refs.echarts1)
      myChart.dispose()
    }
  }
}
</script>
<style lang="less" scoped></style>
